<template>
	<view class="content">
		<view class="_info z-flex z-flex-align-c">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u-image :src="userInfo.cover" width="110rpx" height="110rpx" shape="circle"></u-image>
			</button>
			<view class="z-flex z-flex-between c-fff ml20" style="flex-direction: column;height: 90rpx;">
				<text class="fwb fs30">{{userInfo.name}}</text>
				<text class="fs24">ID: {{userInfo.id}}</text>
			</view>
		</view>
		<view class="_arc"></view>
		<view class="bgc-fff" style="transform: translateY(-40rpx);">
			<view class="z-flex z-flex-between z-flex-align-c line p30">
				<text>手机号</text>
				<text>{{userInfo.phone}}</text>
			</view>
			<view class="z-flex z-flex-between z-flex-align-c line p30" @click="toRealName">
				<text>实名认证</text>
				<text class="c-999" style="margin-left: auto;">{{userInfo.lsUser?userInfo.lsUser:'去认证'}}</text>
				<u-icon v-if="!userInfo.lsUser" name="arrow-right" color="#999999" size="24" style="position: relative;top: 0rpx;"></u-icon>
			</view>
			<view v-if="userInfo.lsCard" class="z-flex z-flex-between z-flex-align-c line p30">
				<text>银行卡信息</text>
				<text class="c-999" style="margin-left: auto;">{{userInfo.lsCard}}</text>
				<!-- <u-icon v-if="!userInfo.lsCard" name="arrow-right" color="#999999" size="24" style="position: relative;top: 0rpx;"></u-icon> -->
			</view>
			
		</view>

		<view class="mt60"></view>

<!-- 		<u-button type="success" :custom-style="customStyle" @click="handLogout">
			退出登录
		</u-button> -->

		<uni-popup ref="popup" type="dialog" :mask-click="false">
			<view class="card bgc-fff">
				<view class="p20 c-666" style="text-align: center;line-height: 80rpx;">修改昵称</view>
				<form @submit="formSubmit" @reset="formReset">
					<view class="pl20 pr20" style="height: 100rpx;">
						<input :maxlength="16" style="width: 100%;text-align: center" type="nickname" class="weui-input"
							:value="nickName" @blur="bindblur" @focus="handfocus" @input="handInput" name="nickName"
							placeholder="请输入您的昵称" />
					</view>
					<view class="uni-btn-v" style="border-top: 2rpx solid #eee;">
						<view class="formbtn">
							<button type="default" form-type="reset" style="color: #333;">取消</button>
							<view style="height: 100%;width: 1rpx;background: #eee;"></view>
							<button :disabled="isdis" form-type="submit">确认</button>
						</view>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserInfoApi,editUserApi,loginApi
	} from '@/api/user.js'
	import { getOssApi } from '@/api/user.js'
	import config from '@/libs/config.js'
	export default {
		data() {
			return {
				customStyle: {
					borderWidth: 0,
					borderColor: 'transparent',
					backgroundColor: '#23bbb3',
					width: '80%',
				},
				form: {
					nickName: '',
					avatarUrl: ''
				},
				option: {},
				openid: uni.getStorageSync('openid'),
				phone: uni.getStorageSync('phone'),
				isdis: true,
				nickName: '',
				img: '',
				userInfo: {}
			}
		},
		onLoad(option) {
			this.option = option
		},
		onShow(){
			this.$nextTick(this.getUserInfo)
		},
		methods: {
			async getUserInfo(){
				if(!this.openid) return
				const {code,data} = await getUserInfoApi({
					openId: this.openid
				})
				if(code != 0) return
				this.userInfo = data
			},
			handLogout() {
				// 调用退出登录接口
				// 清空缓存
				// uni.clearStorageSync()
				// 跳转首页
				uni.clearStorageSync();
				uni.showToast({
					title: '退出成功',
					icon: 'none'
				})
				setTimeout(() => {
					let path = 'pages/index/index'
					uni.$u.route({
						type: 'switchTab',
						url: path
					})
				})
			},
			toRealName(){
				if(!this.userInfo.lsUser){
					uni.$u.route({
						type: 'navigateTo',
						url: 'mapPages/user_info/real_name'
					})
				}else{
					uni.showToast({
						title: '你已成功认证，请勿重复提交',
						icon: 'none'
					})
				}
			},
			toBindCard(){
				if(!this.userInfo.lsCard){
					uni.$u.route({
						type: 'navigateTo',
						url: 'mapPages/user_info/bind_card'
					})
				}else{
					uni.showToast({
						title: '你已成功绑卡，请勿重复提交',
						icon: 'none'
					})
				}
			},
			showModal() {
				this.nickName = ''
				this.isdis = true
				this.$refs.popup.open()
			},
			handfocus() {
				this.isdis = true
			},
			handInput() {
				this.isdis = true
			},
			formReset() {
				this.$refs.popup.close()
			},
			async formSubmit(e) {
				this.nickName = e.detail.value.nickName
				let regtszf = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/ // 特殊字符正则
				if (this.nickName == '') {
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
					await this.getUserInfo()
					return
				} else if (!regtszf.test(this.nickName)) {
					uni.showToast({
						title: '不能包含空格，特殊字符，以及非合法昵称哦~~',
						icon: 'none'
					})
					return
				} else {
					uni.showLoading({
						title: '加载中',
					})
					this.form.nickName = this.nickName
					// todo 接口暂无
					await this.uPUserInfo()
					await this.getUserInfo()
					this.formReset()
				}
			},
			bindblur(e) {
				uni.showLoading({
					title: '正在验证昵称',
				})
				setTimeout(() => {
					this.isdis = false
					uni.hideLoading()
				}, 1000)
			},
			async onChooseAvatar(e) {
				const ossConfig = await getOssApi({dir: config.ossDir})
				const {policy,accessid,signature} = ossConfig.data
				let filePath = e.detail.avatarUrl
				
				let fileType = filePath.substring(filePath.lastIndexOf('.')) || '.jpg'
				let timeStamp = new Date().getTime()
				let key = `${config.ossDir}/${timeStamp}${fileType}` 
				const formData = {
					key,
					policy,
					OSSAccessKeyId: accessid,
					success_action_status: '200',
					signature
				}
				uni.uploadFile({
					url: config.ossUrl,
					filePath,
					formData,
					name: 'file',
					success: async () => {
						let path = `${config.ossUrl}/${key}`
						const {name,phone,openId,id} = this.userInfo
						const {code,data} = await loginApi({name,phone,openId,id,cover: path})
						if (code == 0) { 
							this.userInfo.cover = path
							uni.showToast({
								title: '更换成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '更换失败,请重试',
								icon: 'none'
							})
						}
					},
					fail() {
						uni.showToast({
							title: '更换失败,请重试',
							icon: 'none'
						})
					}
				});
			},
			async uPUserInfo() {
				const {
					code,
					data
				} = await editUserApi(this.form)
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		._info{
			width: 100%;
			height: 130rpx;
			background-color: $uni-color-theme;
			padding: 0 50rpx;
			z-index: 1;
			position: relative;
		}
		._arc{
			width: 100%;
			height: 80rpx;
			border-bottom-left-radius: 100%;
			border-bottom-right-radius: 100%;
			background-color: $uni-color-theme;
			transform: translateY(-40rpx);
		}
	}

	.avatar-wrapper {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 0;
		padding: 0;
		margin-left: 0;
	}

	.card {
		border-radius: 10rpx;
		width: 600rpx;

		.formbtn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;

			button {
				height: 100%;
				flex: 1;
				background: transparent;
				font-size: 26rpx;

				&:after {
					display: none;
				}
			}
		}
	}
</style>
